<template>
  <el-select v-model="value" :placeholder="props.placeholder" clearable filterable :multiple="props.multiple"
    collapse-tags @change="change">
    <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouse_name" :value="item.id" />
  </el-select>
</template>
<script setup>
import useCommonStore from "@/store/modules/common";
const commonStore = useCommonStore();
const warehouseOptions = computed(() => {
  if (!commonStore.warehouseOptions) {
    commonStore.getWarehouseList()
  }
  return commonStore.warehouseOptions
});
const props = defineProps({
  modelValue: [Number, Object, Array],
  placeholder: {
    type: String,
    default: '请选择',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
});

const value = ref()
watch(() => props.modelValue, (val) => {
  value.value = val
})
const emit = defineEmits(['update:modelValue', 'change'])
const change = (val) => {
  emit('update:modelValue', val)
  if (!props.multiple) {
    const item = warehouseOptions.value.find(i => i.id == val)
    emit('change', item?.warehouse_name)
  }
}

</script>